<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 -->

<!--
 * @Descripttion: 办一件事
 * @version: 
 * @Author: 雷宇琦
 * @Date: 2025-03-04 18:37:04
 * @LastEditors: 雷宇琦
 * @LastEditTime: 2025-03-04 21:54:17
-->
<template>
	<div class="w-screen h-screen overflow-hidden">
		<!-- 开屏广告 -->
		<div v-show="showOpening" class="opening" :class="{ animate__animated: isAnimating, animate__fadeOut: isAnimating }" @animationend="handleAnimationEnd">
			<div class="countNum" @click="handleJump">{{ count }}s 跳过</div>
			<var-image class="mt-21" width="324px" height="55px" src="../assets/pictures/opening-title.png"></var-image>
			<var-image class="mt-8" width="301px" height="40px" src="../assets/pictures/opening-content.png"></var-image>
		</div>
		<!-- 主体内容 -->
		<div class="main" v-show="!showOpening">
			<var-app-bar title="餐饮一件事办事指南" title-position="center" color="#fff" text-color="#000" style="font-weight: semibold; box-shadow: none" />
			<div class="content">
				<!-- 基本信息 -->
				<div class="basic">
					<div class="basic-title">
						<span class="font-medium">基本信息</span>
						<div>
							<var-chip color="rgb(232, 243, 255)" text-color="rgb(22, 93, 255)" class="chip-1 mr-1">承诺件</var-chip>
							<var-chip color="rgb(255, 236, 232)" text-color="rgb(245, 63, 63)" class="chip-2">不收费</var-chip>
						</div>
					</div>
					<div class="flex justify-between mt-4" v-for="(item, index) in normalBasic" :key="index">
						<span class="text-gray-400">{{ item.label }}</span>
						<span>{{ item.value }}</span>
					</div>
					<div class="basic-item">
						<div class="text-gray-400">{{ basicData[4].label }}</div>
						<div class="basic-item-content">{{ basicData[4].value }}</div>
					</div>
					<div class="basic-item">
						<div class="text-gray-400">{{ basicData[5].label }}</div>
						<div class="basic-item-content">
							<p>{{ basicData[5].value }}</p>
							<p class="text-blue-600 text-right">查看代办事项</p>
						</div>
					</div>
					<div class="basic-item">
						<div class="text-gray-400">{{ basicData[6].label }}</div>
						<div class="basic-item-content scroll-item">{{ basicData[6].value }}</div>
					</div>
					<div class="basic-item">
						<div class="text-gray-400">{{ basicData[6].label }}</div>
						<div class="basic-item-content scroll-item">{{ basicData[6].value }}</div>
					</div>
					<div class="basic-item">
						<div class="text-gray-400">{{ basicData[6].label }}</div>
						<div class="basic-item-content scroll-item">{{ basicData[6].value }}</div>
					</div>
				</div>
			</div>

			<div class="bottomNav">
				<var-button block color="rgb(72, 104, 255)" text-color="#fff" style="border-radius: 120px">线上办理</var-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
let timer
const showOpening = ref(true)
const count = ref(5)
const isAnimating = ref(false) //用于控制动画的播放

// 处理动画结束事件
const handleAnimationEnd = () => {
	// 动画结束后，隐藏 div 并移除动画类
	showOpening.value = false
	isAnimating.value = false
}
const countDown = () => {
	timer = setInterval(() => {
		count.value--
		if (count.value === 0) {
			isAnimating.value = true
			clearInterval(timer)
		}
	}, 1000)
}
const handleJump = () => {
	isAnimating.value = true
	clearInterval(timer)
}

const basicData = ref([
	{
		label: '服务对象',
		value: '法人服务',
	},
	{
		label: '办理形式',
		value: '窗口办理、网上办理',
	},
	{
		label: '是否收费',
		value: '否',
	},
	{
		label: '是否支持物流快递',
		value: '否',
	},
	{
		label: '线下跑一次原因和环节',
		value: '领取食品经营许可证、招牌设置许可证或反馈结果公众聚集场所投入使用、营业前消防安全检查意见书、预防性体检合格证结果',
	},
	{
		label: '联办机构',
		value: '成都市锦江区综合行政执法局，成都市锦江区市场监督管理局，成都市锦江区消防救援大队，成都市锦江区卫生健康局',
	},
	{
		label: '申报须知',
		value:
			'(一)取得营业执照等合法主体资格。(二)具有与经营的食品品种、数量相适应的食品原料处理和食品加工、销售、贮存等场所，保持该场所环境整洁并与有毒、有害场所以及其他污染源保持规定的距离。(三)具有与经营的食品品种、数量相适应的经营设备或者设施，有相应的消毒、更衣、盥洗、采光、照明、通风、防腐、防尘、防蝇、防鼠、防虫、洗涤以及处理废水、存放垃圾和废弃物的设备或者设施。(四)有专职或者兼职的食品安全总监、食品安全员等食品安全管理人员和保证食品安全的规章制度。(五)具有合理的设备布局和工艺流程，防止待加工食品与直接入口食品、原料与成品交叉污染避免食品接触有毒物、不洁物。(六)取得户外招牌设施设置点位权属证明(其中，设置点位为自有权属的，提供产权证明;设置点位为租用的，提供租赁协议和点位产权证明)。(七)已统计本单位需进行预防性体检从业人员名单',
	},
])
const normalBasic = computed(() => {
	return basicData.value.slice(0, 4)
})
onMounted(() => {
	countDown()
})
</script>

<style lang="scss" scoped>
.opening {
	position: absolute;
	z-index: 2;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	background: url('../assets/pictures/opening.png');
	background-size: cover;
	.countNum {
		cursor: pointer;
		margin-top: 30px;
		margin-left: auto;
		margin-right: 12px;
		background: rgba(49, 50, 51, 0.36);
		border-radius: 120px;
		width: 69px;
		height: 26px;
		border-radius: 120px;
		text-align: center;
		color: white;
		font-size: 13px;
		line-height: 26px;
	}
}
.main {
	z-index: 1;
	width: 100%;
	// height: 100%;
	background: rgba(246, 247, 252, 1);
	font-size: 14px;
}
.content {
	height: calc(100vh - 108px);
	overflow: scroll;
	--webkit-overflow-scrolling: touch;
	&::-webkit-scrollbar {
		display: none;
	}
}
// 基础信息
.basic {
	background-color: #fff;
	padding: 16px;
	&-title {
		height: 21px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.chip-1 {
			padding: 0;
			border-radius: 3px;
			border: 1px solid rgba(190, 218, 255, 1);
			font-size: 12px;
			width: 48px;
			height: 21px;
		}
		.chip-2 {
			@extend .chip-1;
			border: 1px solid rgba(253, 205, 197, 1);
		}
	}
	&-item {
		margin-top: 16px;
		&-content {
			margin-top: 4px;
			padding: 8px 10px;
			border-radius: 2px;
			background: rgba(246, 247, 252, 1);
		}
		.scroll-item {
			height: 115px;
			overflow: scroll;
			--webkit-overflow-scrolling: touch;
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
}
.bottomNav {
	width: 100%;
	height: 54px;
	position: fixed;
	bottom: 0;
	padding: 8px 26px;
	// align-items: center;
}
</style>
